<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="PagesUI/css/layout.css" rel="stylesheet" type="text/css" />
<link href="PagesUI/css/demo_table.css" rel="stylesheet" type="text/css" />
<link href="PagesUI/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="PagesUI/scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="PagesUI/scripts/jquery-ui-no-ajax.js"></script>
<script type="text/javascript" src="PagesUI/scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="PagesUI/scripts/lib.js"></script>
<script type="text/javascript">
	$(function(){
		reviewAccountTable = $('#reviewAccountList').dataTable({
			"bProcessing" : true,
			"sAjaxSource" : "/MAP/PagesUI/dataUserRequest",
			"oLanguage": {
				"sProcessing": "<img src='images/loading.gif' alt='Loading'/>"
	        },
	        "fnServerData" : function(sSource, aoData, fnCallback) {
				$.ajax({
					"dataType" : 'json',
					"type" : "POST",
					"url" : sSource,
					"data" : aoData,
					"success" : fnCallback
				});
			},
			"aoColumns" : [ {
				"mData" : "id"
			}, {
				"mData" : "username"
			}, {
				"mData" : "password"
			}, {
				"mDataProp" : "sex",
				"sDefaultContent": ""
			}, {
				"mData" : "address",
				"sDefaultContent": ""
			}, {
				"mData" : "birthday",
				"sDefaultContent": ""
			}, {
				"mData" : "email"
			}, {
				"mData" : null ,
				"sClass": "center",
				"sDefaultContent": '<button type="button" id = "approve" class="approve">Approve</button>'
			}

			],
			"aaSorting" : [ [ 0, "asc" ] ]
		});
		$("#reviewAccountList tbody").click(function(event) {
			$(reviewAccountTable.fnSettings().aoData).each(function() {
				$(this.nTr).removeClass('row_selected');
			});
			$(event.target.parentNode).addClass('row_selected');
			var selected = fnGetSelected(reviewAccountTable);
		});
		
	});
	$(document).ajaxComplete(function() {
		$("tbody td:first-child").hide();
		//$('tbody td:nth-child(3)').hide();
		$("#approve").click(function() {
			var id = $(this).closest("tr").find("td:eq(0)").text();
			var username = $(this).closest("tr").find("td:eq(1)").text();
			var password = $(this).closest("tr").find("td:eq(2)").text();
			var sex = $(this).closest("tr").find("td:eq(3)").text();
			var address = $(this).closest("tr").find("td:eq(4)").text();
			var birthday = $(this).closest("tr").find("td:eq(5)").text();
			var email = $(this).closest("tr").find("td:eq(6)").text();
			var user = new Object();
			user.id = id;
			user.username = username;
			user.password = password;
			user.sex = sex;
			user.address = address;
			user.birthday = birthday;
			user.email = email;
			if (confirm("Do you want to allow User: \" " + username + " \" use this application ?")) {
				$.ajax({
			         type: "POST",
			         contentType : "application/json",
			         url: "approveUser",
			         data: JSON.stringify(user),
			         success : function(data) {
			        	 reviewAccountTable.fnReloadAjax();
			         },
			         error: function (request, status, error) {
			             alert(error);
				         }
			        });
			}else {
				alert("User " + username + " was approved");
			}
			
		    //var id = $("#choose-address-table").find(".nr:first").text();
		    //$("#resultas").append(id); // Testing: append the contents of the td to a div
		});
	});
</script>
</head>
<body>
<h2>Review Account Register</h2>
<table class="display" id="reviewAccountList">
	<thead>
		<tr>
			<th style="display: none;">ID</th>
			<th>UserName</th>
			<th>PassWord</th>
			<th>Sex</th>
			<th>Address</th>
			<th>BirthDay</th>
			<th>Email</th>
			<th>Admin</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="8" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
	
	<tfoot>
		<tr>
			<th style="display: none;">ID</th>
			<th style="display: none;">UserName</th>
			<th style="display: none;">PassWord</th>
			<th style="display: none;">Sex</th>
			<th style="display: none;">Address</th>
			<th style="display: none;">BirthDay</th>
			<th style="display: none;">Email</th>
			<th style="display: none;">Admin</th>
		</tr>
	</tfoot>
</table>
</body>
</html>